<!-- 项目设备列表 -->
<template>
  <div v-loading="table_Loading">
    <el-table ref="my_tables" @row-click="rowClick" :row-class-name="transcriptTableRowClassName"
      :cell-class-name="AddClass" @cell-mouse-enter="(data, event, a2, a4) => cellMouseEnter(data, event, a2, a4)
        " @cell-mouse-leave="cellMouseLeave" @selection-change="handleSelectionChange" class="mmy-table"
      :header-cell-style="{ background: '#fafbfc', color: '#333333' }" :data="tableDatas" style="width: 100%"
      :height="heightActive">
      <el-table-column type="selection" width="30" />
      <el-table-column type="index" fixed label="序号" width="80" />
      <el-table-column label="图纸阶段" fixed width="120">
        <template #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">图纸阶段</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="drawing_stage.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 :teleported="false" size="small" style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable multiple filterable collapse-tags collapse-tags-tooltip :options="[
                  {
                    value: '施工图',

                    label: '施工图',
                  },
                  {
                    value: '工程图',

                    label: '工程图',
                  },
                ]" v-model="drawing_stage" @change="(text) => changeFn(text, 'drawing_stage')" placeholder="请选择">
              </el-select-v2>
            </el-popover>
          </div>
        </template>
        <template #default="scope">
          <div v-if="
            !scope.row.drawing_stage || scope.row.drawing_stage == '工程图'
          ">
            {{ scope.row.drawing_stage }}
          </div>
          <div v-else style="color: red">{{ scope.row.drawing_stage }}</div>
        </template>
      </el-table-column>
      <el-table-column v-for="(head, index) in tableHeader" :key="index" :prop="head.prop" :label="head.label"
        :width="head.width" :fixed="head.fixed" align="center" :sortable="head.sortable" show-overflow-tooltip>
        <template v-if="head.prop == 'equip_unit_no'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">主项</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="SelectMajor.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 v-if="props.equipOptions.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable multiple filterable collapse-tags
                collapse-tags-tooltip :options="props.equipOptions" v-model="SelectMajor"
                @change="(text) => changeFn(text, 'SelectMajor')" placeholder="请选择主项号">
              </el-select-v2>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'equip_name'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">设备名称</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equip_nameInput.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 v-if="props.nameOptions.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="props.nameOptions" v-model="equip_nameInput"
                @change="(text) => changeFn(text, 'equip_nameInput')" placeholder="请输入设备名称">
              </el-select-v2>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'equip_no'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">设备位号</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equipEquip_no.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 v-if="props.nameOptions.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="props.equipEquip_no" v-model="equipEquip_no"
                @change="(text) => changeFn(text, 'equipEquip_no')" placeholder="请输入设备位号">
              </el-select-v2>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'equip_no'" #default="scope">
          <div class="equip_no_class">{{ scope.row.equip_no }}</div>
        </template>

        <template v-if="head.prop == 'equip_class'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">设备种类</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equipEquip_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 v-if="props.equipEquip_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="props.equipEquip_class" v-model="equipEquip_class"
                @change="(text) => changeFn(text, 'equipEquip_class')" placeholder="请输入设备种类">
              </el-select-v2>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'installation_mode'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">安装方式</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="installation_mode_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select-v2 v-if="props.installation_mode_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="props.installation_mode_class" v-model="installation_mode_class"
                @change="(text) => changeFn(text, 'installation_mode_class')" placeholder="请输入设备种类">
              </el-select-v2>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'equip_designer'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">设计人</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equip_designer_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select v-if="props.equip_designer_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="equip_designer_classPINGYING" v-model="equip_designer_class"
                @change="(text) => changeFn(text, 'equip_designer_class')" placeholder="请输入"
                :filter-method="matchFruitFirst_equip_designer_class">
                <el-option v-for="(item, index) in equip_designer_classPINGYING" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'equip_checker'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">校核人</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equip_checker_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select v-if="props.equip_checker_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="equip_checker_classPINGYING" v-model="equip_checker_class"
                @change="(text) => changeFn(text, 'equip_checker_class')" placeholder="请输入"
                :filter-method="matchFruitFirst_equip_checker_class">
                <el-option v-for="(item, index) in equip_checker_classPINGYING" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'auditor'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">审核人</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="auditor_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select v-if="props.auditor_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="auditor_classPINGYING" v-model="auditor_class"
                @change="(text) => changeFn(text, 'auditor_class')" placeholder="请输入"
                :filter-method="matchFruitFirst_auditor_class">
                <el-option v-for="(item, index) in auditor_classPINGYING" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-popover>
          </div>
        </template>

        <template v-if="head.prop == 'approver'" #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">审定人</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="approver_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select v-if="props.approver_class.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="approver_classPINGYING" v-model="approver_class"
                @change="(text) => changeFn(text, 'approver_class')" placeholder="请输入"
                :filter-method="matchFruitFirst_approver_class">
                <el-option v-for="(item, index) in approver_classPINGYING" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
              <div v-else>暂无可筛选的人员信息</div>
            </el-popover>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="equip_lastmodifytime" label="最后修改时间" align="center" sortable width="180">
        <template #default="scope">
          <div>{{ changeStr(scope.row.equip_lastmodifytime) }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="版本" align="center" width="90">
        <template #default="scope">
          <el-select v-model="scope.row.equip_version" @change="(text) => revChange(text, scope.row)" size="small">
            <el-option v-for="(item, index) in scope.row.different" :key="index" :label="item.label"
              :value="item.value" />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column v-if="maxNum >= 50" sortable :sort-method="sortMethod" fixed="right" :label="tableHeaderStrProps"
        width="120" align="center">
        <template #header>
          <div @click.stop class="move_class" style="display: flex; align-items: center">
            <div class="my_input_not_send" style="margin-right: 5px">
              <el-input size="small" @blur="changeHeader" v-model="tableHeaderStrProps"></el-input>
            </div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="custom_att1_val_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select v-if="custom_att1_val_classPINGYING.length > 0" :teleported="false" size="small"
                style="width: 180px; margin-right: 10px; z-index: 2000" clearable filterable multiple collapse-tags
                collapse-tags-tooltip :options="custom_att1_val_classPINGYING" v-model="custom_att1_val_class"
                @change="(text) => changeFn(text, 'custom_att1_val_class')" placeholder="请输入">
                <el-option v-for="(item, index) in custom_att1_val_classPINGYING" :key="index" :label="item.label"
                  :value="item.value" />
              </el-select>
              <div v-else>暂无可筛选的数据</div>
            </el-popover>
          </div>
        </template>

        <template #default="scope">
          <el-input size="small" @blur="(e) => changeInput(e, scope.row)"
            v-model="scope.row.custom_att1_val"></el-input>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="设计状态" width="100" align="center">
        <template #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">设计状态</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="equip_check_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select :teleported="false" size="small" style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable filterable multiple collapse-tags collapse-tags-tooltip v-model="equip_check_class"
                @change="(text) => changeFn(text, 'equip_check_class')" placeholder="请输入">
                <el-option v-for="(item, index) in [
                  {
                    value: '0',
                    label: '设计中',
                  },
                  {
                    value: '10',
                    label: '校核中',
                  },
                  {
                    value: '20',
                    label: '审核中',
                  },
                  {
                    value: '30',
                    label: '已完成',
                  },
                ]" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-popover>
          </div>
        </template>

        <template #default="scope">
          <el-tag size="small" v-if="scope.row.equip_check == '10'">校核中</el-tag>
          <el-tag size="small" v-if="scope.row.equip_check == '20'" type="warning">审核中</el-tag>
          <el-tag size="small" v-if="scope.row.equip_check == '30'" type="success">已完成</el-tag>
          <el-tag size="small" v-if="scope.row.equip_check == '0'" type="info">设计中</el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="模型状态" width="100" align="center">
        <template #header>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 5px">模型状态</div>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="model_stage_class.length == 0 ? '' : 'active'">
                  <el-icon>
                    <Filter />
                  </el-icon>
                </div>
              </template>
              <el-select :teleported="false" size="small" style="width: 180px; margin-right: 10px; z-index: 2000"
                clearable filterable multiple collapse-tags collapse-tags-tooltip v-model="model_stage_class"
                @change="(text) => changeFn(text, 'model_stage_class')" placeholder="请输入">
                <el-option v-for="(item, index) in [
                  {
                    value: '0',
                    label: '设计中',
                  },
                  {
                    value: '10',
                    label: '校核中',
                  },

                  {
                    value: '20',
                    label: '已完成',
                  },
                ]" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-popover>
          </div>
        </template>

        <template #default="scope">
          <el-tag size="small" v-if="scope.row.model_stage == '10'">校核中</el-tag>

          <el-tag size="small" v-if="scope.row.model_stage == '20'" type="success">已完成</el-tag>
          <el-tag size="small" v-if="scope.row.model_stage == '0'" type="info">设计中</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template #default="{ row }">
          <div v-if="row.hasNewProcess == 'True'" style="
              width: 7px;
              height: 7px;
              border-radius: 50%;
              background: red;
              position: absolute;
              top: 10px;
              left: 36px;
            "></div>
          <el-button :disabled="row.equip_version !== row.different[0].equip_version"
            v-if="!(row.equip_version !== row.different[0].equip_version)" link type="primary" size="small"
            @click="editEquipment(row)">编辑</el-button>
          <el-button v-else link type="primary" size="small" @click="checkEquipment(row)">预览</el-button>

          <el-button :disabled="row.equip_version !== row.different[0].equip_version" link type="warning" size="small"
            @click="reuseEquip(row)">复用</el-button>
          <el-button :disabled="row.equip_version !== row.different[0].equip_version" link type="success" size="small"
            @click="upgradeEquip(row)">升版</el-button>

          <el-button :disabled="row.equip_version !== row.different[0].equip_version" link type="danger" size="small"
            @click="showDioFile(row)">附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出设备复用窗口 -->
    <el-dialog @close="closeFrom(destEquipInfoRef)" title="复用设备" v-model="copyEquipFormVisible" width="25%">
      <el-form ref="destEquipInfoRef" size="small" :model="destEquipInfo" :rules="destEquipInfoRules"
        label-width="80px">
        <el-form-item label="项目代号" prop="destProjOid">
          <el-select style="width: 100%" size="small" v-model="destEquipInfo.destProjOid" placeholder="请选择源设备项目代号"
            filterable>
            <el-option v-for="(proj, index) in allProjList" :key="index" :label="proj.proj_no + ' - ' + proj.proj_name"
              :value="proj.proj_oid" v-show="proj.proj_no !== 'All'" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备位号" prop="destEquipNo">
          <el-select style="width: 100%" size="small" v-model="destEquipInfo.destEquipNo" placeholder="请选择源设备位号"
            filterable>
            <el-option v-for="(proj, index) in OptionsEquip" :key="index" :label="proj.label" :value="proj.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="copyEquipFormVisible = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="handleCopyEquip(destEquipInfoRef)">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-tooltip popper-class="my_tooltip_mouve" v-model:visible="visible" raw-content effect="light" trigger="click"
      virtual-triggering :virtual-ref="triggerRef">
      <template #content>
        <el-descriptions class="margin-top" :column="3" size="small" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">主项</div>
            </template>
            {{ tooltipsData.equip_unit_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设备名称</div>
            </template>
            {{ tooltipsData.equip_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设备位号</div>
            </template>
            {{ tooltipsData.equip_no }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设备种类</div>
            </template>
            {{ tooltipsData.equip_class }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">安装方式</div>
            </template>
            {{ tooltipsData.installation_mode }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设备图号</div>
            </template>
            {{ tooltipsData.equip_dwg_no }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设备类别</div>
            </template>
            {{ tooltipsData.vessel_type }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">台数</div>
            </template>
            {{ tooltipsData.equip_count }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">空设备质量</div>
            </template>
            {{ tooltipsData.equip_dry_weight }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">特材重量</div>
            </template>
            {{ tooltipsData.special_material_weight }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设计人</div>
            </template>
            {{ tooltipsData.equip_designer }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">校核人</div>
            </template>
            {{ tooltipsData.equip_checker }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">审核人</div>
            </template>
            {{ tooltipsData.auditor }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">审定人</div>
            </template>
            {{ tooltipsData.approver }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">条件发送时间</div>
            </template>
            {{ tooltipsData.conditional_send_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">设计完成时间</div>
            </template>
            {{ tooltipsData.design_finish_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">校核完成时间</div>
            </template>
            {{ tooltipsData.check_finish_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">审核完成时间</div>
            </template>
            {{ tooltipsData.review_finish_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">返条件时间</div>
            </template>
            {{ tooltipsData.return_condition_time }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">入库时间</div>
            </template>
            {{ tooltipsData.storage_time }}
          </el-descriptions-item>
        </el-descriptions>

        <div style="
            margin-top: 20px;
            display: flex;
            justify-content: start;
            padding-bottom: 20px;
          ">
          <span style="font-weight: bolder; color: #13ce66">设计状态：</span>
          <el-steps :space="100" :active="activeNumber" finish-status="success" process-status="finish" align-center
            size="small" style="width: 68%">
            <el-step :icon="Edit">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="设计">
                  <div v-if="activeNumber <= 0" @click="changeStatue(10)" class="hand_me el-step__icon is-text">
                    <div class="el-step__icon-inner">1</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumber >= 1" @click="changeStatue(10)"
                    class="hand_me el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>
            <el-step :icon="Refresh">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="校核">
                  <div v-if="activeNumber <= 1" @click="changeStatue(20)" class="hand_me el-step__icon is-text">
                    <div class="el-step__icon-inner">2</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumber >= 2" @click="changeStatue(20)"
                    class="hand_me el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>

            <el-step :icon="CircleCheck">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="审核">
                  <div v-if="activeNumber <= 2" @click="changeStatue(30)" class="hand_me el-step__icon is-text">
                    <div class="el-step__icon-inner">3</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumber >= 3" @click="changeStatue(30)"
                    class="hand_me el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>

            <el-step :icon="CircleCheck">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="已完成">
                  <div v-if="activeNumber <= 2" class="el-step__icon is-text">
                    <div class="el-step__icon-inner">4</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumber >= 3" class="el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>
          </el-steps>
        </div>

        <div style="
            margin-top: 7px;
            display: flex;
            justify-content: start;
            padding-bottom: 20px;
          ">
          <span style="font-weight: bolder; color: #1890ff">模型状态：</span>
          <el-steps :space="100" :active="activeNumberModel" finish-status="success" process-status="finish"
            align-center size="small" style="width: 51%">
            <el-step :icon="Edit">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="设计">
                  <div v-if="activeNumberModel <= 0" @click="changeStatueModel(10)"
                    class="hand_me el-step__icon is-text">
                    <div class="el-step__icon-inner">1</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumberModel >= 1" @click="changeStatueModel(10)"
                    class="hand_me el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>
            <el-step :icon="Refresh">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="校核">
                  <div v-if="activeNumberModel <= 1" @click="changeStatueModel(20)"
                    class="hand_me el-step__icon is-text">
                    <div class="el-step__icon-inner">2</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumberModel >= 2" @click="changeStatueModel(20)"
                    class="hand_me el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>

            <el-step :icon="CircleCheck">
              <template #icon>
                <el-tooltip placement="top-start" trigger="hover" content="已完成">
                  <div v-if="activeNumberModel <= 1" class="el-step__icon is-text">
                    <div class="el-step__icon-inner">3</div>
                  </div>

                  <div style="color: #81cc5c" v-if="activeNumberModel >= 2" class="el-step__icon is-text is-success">
                    <i class="el-icon el-step__icon-inner is-status"><svg xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
                          data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor"></path>
                      </svg></i>
                  </div>
                </el-tooltip>
              </template>
            </el-step>
          </el-steps>

          <div style="position: absolute; height: 60px; width: 100%" class="box"></div>
        </div>
      </template>
    </el-tooltip>

    <el-dialog @close="handleClose()" v-model="dialogFiles" title="附件列表" width="47%">
      <el-table size="default" :data="dioFiles" class="roledata" height="400">
        <el-table-column width="310" show-overflow-tooltip prop="file_name" label="附件名称">
        </el-table-column>

        <el-table-column width="110" prop="attach_file_type" label="附件类型">
          <template #header>
            <div style="display: flex; align-items: center">
              <div style="margin-right: 5px">附件类型</div>
              <el-popover :width="300" trigger="hover">
                <template #reference>
                  <div class="icone" :class="attach_file_type_.length == 0 ? '' : 'active'">
                    <el-icon>
                      <Filter />
                    </el-icon>
                  </div>
                </template>
                <el-select-v2 :teleported="false" size="small" style="width: 280px; margin-right: 10px; z-index: 2000"
                  clearable filterable multiple collapse-tags collapse-tags-tooltip :options="file_typeOptions"
                  v-model="attach_file_type_" placeholder="请输入">
                </el-select-v2>
              </el-popover>
            </div>
          </template>

          <template #default="scope">
            <el-tooltip :show-after="1000" class="box-item" effect="dark"
              :content="fileTypeStrFn(scope.row.attach_file_type)" placement="top-start">
              <div>
                {{
                  scope.row.attach_file_type ? scope.row.attach_file_type : ""
                }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="user_account" label="文件大小">
          <template #default="scope">
            <el-tag style="margin-right: 5px; margin-bottom: 5px" size="small" type="success">
              {{ convertFileSize(scope.row.file_size_inBytes) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creation_time" label="上传时间">
        </el-table-column>

        <el-table-column width="150" label="操作">
          <template #default="scope">
            <span style="
                color: #67c23a;
                margin-right: 1em;
                cursor: pointer;
                font-size: 12px;
              " size="small" @click="viewFile(scope.$index, scope.row)">
              预览
            </span>
            <span style="
                color: #1890ff;
                margin-right: 1em;
                cursor: pointer;
                font-size: 12px;
              " size="small" @click="downLoadFile(scope.$index, scope.row)">
              下载
            </span>
            <el-popconfirm title="确定要删除吗?" @confirm="delFile(scope.$index, scope.row)">
              <template #reference>
                <span style="color: #f56c6c; cursor: pointer; font-size: 12px">删除</span>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="
          display: flex;
          align-items: center;
          margin-top: 20px;
          padding-right: 10px;
          justify-content: flex-end;
          position: relative;
        " class="upLoad">
        <div v-if="fileTypeStr.length > 0" style="position: absolute; left: 20px; top: 5px">
          附件类型：{{ fileTypeStr }}
        </div>
        <el-select style="margin-right: 10px" size="small" v-model="file_type" clearable filterable
          placeholder="请选择文件类型">
          <el-option v-for="item in file_typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-upload :icon="Download" class="upload-demo" action="#" :show-file-list="false" :http-request="uploadTable">
          <el-button :disabled="is_upload" size="small" type="success">上传文件</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Filter, Download } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { watch, ref, onMounted, nextTick } from "vue";
  import { useRouter } from "vue-router";
  import {
    Check,
    Delete,
    CircleCheck,
    Platform,
    Refresh,
    Edit,
    Message,
    Search,
    Star,
    DocumentCopy,
    Top,
    Bottom,
    Warning,
    Upload,
  } from "@element-plus/icons-vue";
  import {
    UpgradeEquip,
    ReuseEquip,
    GetEquipAttachFiles,
    DeleteEquipAttachFile,
    UploadEquipFiles,
    UpdateLastModifyTime,
    UpdateEquipCustomAttribute,
    UpdateEquipCustomAttVal,
  } from "/@/api/equipment";
  import { useEquipmentStore } from "../../../stores/equipment";
  import checkFile from "/@/utils/checkFile";
  import {
    DownloadDepartmentFile,
    getAllPro as getproject,
  } from "../../../api/projectManage/projectList";
  import {
    getEquipments,
    ModifyEquipStatus,
    ModifyEquipModelStatusV2,
  } from "/@/api/equipment";
  import PinYinMatch from "pinyin-match";
  const props = defineProps([
    "Myproj_oid",
    "equipments",
    "equipOptions",
    "equipEquip_no",
    "nameOptions",
    "equipEquip_class",
    "installation_mode_class",
    "equip_designer_class",
    "equip_checker_class",
    "auditor_class",
    "approver_class",
    "tableHeaderStr",
    "custom_att1_val_option",
  ]);
  let equipActive = ref("");
  let store = useEquipmentStore();

  let custom_att1_val_class = ref([]);
  let custom_att1_val_classPINGYING = ref([]);

  let visible = ref(false);

  let convertFileSize = (sizeInBytes) => {
    if (sizeInBytes >= 100000) {
      // 如果文件大小大于或等于100KB，则转换为MB
      return (sizeInBytes / (1024 * 1024)).toFixed(2) + " MB";
    } else {
      // 如果文件大小小于100KB，则保留为KB
      return (sizeInBytes / 1024).toFixed(2) + " KB";
    }
  };

  let installation_mode_class = ref([]);
  let handleClose = () => {
    file_type.value = null;
  };

  let file_type = ref(null);
  let fileTypeStr = ref("");
  let file_typeOptions = ref([
    {
      label: "设计条件 - (工艺条件，塔内件等)",
      value: "设计条件",
    },
    {
      label: "校审文件 - (红蓝笔扫描)",
      value: "校审文件",
    },
    {
      label: "会签文件 - (会签图、管口方位图等)",
      value: "会签文件",
    },
    {
      label: "成品文件 - (工程图 施工图) ",
      value: "成品文件",
    },
    {
      label: "竣工资料 - (审核的制造单位图纸及审图意见)",
      value: "竣工资料",
    },
    {
      label: "其他资料",
      value: "其他资料",
    },
  ]);

  let tableHeaderStrProps = ref("");
  let sortMethod = (a, b) => {
    if (!a.custom_att1_val) return 1;
    if (!b.custom_att1_val) return -1;
    if (a.custom_att1_val < b.custom_att1_val) {
      return -1;
    } else if (a.custom_att1_val > b.custom_att1_val) {
      return 1;
    } else {
      return 0;
    }
  };

  let fileTypeStrFn = (str) => {
    if (str) {
      return file_typeOptions.value.find((v) => v.value === str).label;
    } else {
      return "未指定附件类型";
    }
  };

  let model_stage_class = ref([]);
  let equip_check_class = ref([]);
  let approver_classPINGYING = ref([]);
  let approver_class = ref([]);
  let auditor_classPINGYING = ref([]);
  let auditor_class = ref([]);
  let equip_checker_classPINGYING = ref([]);
  let equip_checker_class = ref([]);
  let equip_designer_classPINGYING = ref([]);

  let matchFruitFirst_approver_class = (searchContent) => {
    if (searchContent) {
      let result = [];
      props.approver_class.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);

        if (matchResult) {
          result.push(item);
        }
      });
      approver_classPINGYING.value = result;
    } else {
      approver_classPINGYING.value = props.approver_class;
    }
  };

  let matchFruitFirst_auditor_class = (searchContent) => {
    if (searchContent) {
      let result = [];
      props.auditor_class.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);

        if (matchResult) {
          result.push(item);
        }
      });

      auditor_classPINGYING.value = result;
    } else {
      auditor_classPINGYING.value = props.auditor_class;
    }
  };

  let matchFruitFirst_equip_checker_class = (searchContent) => {
    if (searchContent) {
      let result = [];
      props.equip_checker_class.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);

        if (matchResult) {
          result.push(item);
        }
      });

      equip_checker_classPINGYING.value = result;
    } else {
      equip_checker_classPINGYING.value = props.equip_checker_class;
    }
  };

  let matchFruitFirst_equip_designer_class = (searchContent) => {
    if (searchContent) {
      let result = [];
      props.equip_designer_class.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);

        if (matchResult) {
          result.push(item);
        }
      });

      equip_designer_classPINGYING.value = result;
      console.log(result);
    } else {
      equip_designer_classPINGYING.value = props.equip_designer_class;
    }
  };

  let dialogFiles = ref(false);
  const triggerRef = ref({
    getBoundingClientRect() {
      return position.value;
    },
  });

  function debounce(func, wait, immediate) {
    let timeout;

    return function executedFunction(...args) {
      const context = this;
      if (timeout) clearTimeout(timeout);

      if (immediate) {
        // 如果已经立即执行过，不再执行
        const callNow = !timeout;
        timeout = setTimeout(() => {
          timeout = null;
        }, wait);
        if (callNow) func.apply(context, args);
      } else {
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      }
    };
  }

  let moveSend = (e, dom) => {
    if (!document.querySelector(".my_input_not_send")?.contains(e.target)) {
      if (dom.contains(e.target)) {
        store.UpgradeEquipCount += 1;
      }
    }
  };

  let maxNum = ref(0);

  let tableScroll = (e) => {
    console.log(e);
  };

  let numSize = 1;
  let height = ref(41.1);
  let sizePage = 20;
  let my_tables = ref(null);
  onMounted(() => {
    setTimeout(async () => {
      let dom = document.querySelector(".move_class");
      let fn = debounce(moveSend, 30, true);
      window.addEventListener("mousemove", (e) => fn(e, dom));

      document
        .querySelector(".mmy-table .el-scrollbar__wrap")
        .addEventListener("scroll", async (e) => {
          let scrollTop =
            e.target.scrollTop + e.target.clientHeight + height.value;

          let sizePageS = sizePage * numSize;
          let top = height.value * sizePageS;

          if (e.target.scrollTop === 0) {
            sizePage = 20;
            numSize = 1;
            sizePageS = sizePage * numSize;
            top = height.value * sizePageS;
          }

          if (scrollTop >= top) {
            numSize += 1;
            sizePageS = sizePage * numSize;
            if (tableDatas.value.length < copyDataWait.value.length) {
              tableDatas.value.push(
                ...copyDataWait.value.slice(tableDatas.value.length, sizePageS)
              );
            }
          }
        });
    }, 2000);

    const throttledMouseMoveFn = throttle(onMounseFn, 1000);

    document.addEventListener("mousemove", (e) => throttledMouseMoveFn(e));
  });

  let activeNumber = ref(10);
  let throttle = (func, limit) => {
    let inThrottle;
    return function () {
      const args = arguments;
      const context = this;

      if (!inThrottle) {
        func.apply(context, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  };

  let onMounseFn = (e) => {
    let bool = [...document.querySelectorAll(".sbwh")].some(
      (v) => v.contains(e.target) || e.target == v
    );
    if (document.querySelector(".my_tooltip_mouve")?.contains(e.target) || bool) {
      visible.value = true;
    } else {
      visible.value = false;
    }
  };

  let is_upload = ref(true);

  watch(file_type, () => {
    if (file_type.value) {
      is_upload.value = false;
      fileTypeStr.value = file_typeOptions.value.find(
        (v) => v.value === file_type.value
      ).label;
    } else {
      is_upload.value = true;
      fileTypeStr.value = "";
    }
  });
  let uploadTable = async (file) => {
    let fromData = new FormData();
    fromData.append("file", file.file);

    await UploadEquipFiles(
      fromData,
      localStorage.getItem("selectedProject")
        ? JSON.parse(localStorage.getItem("selectedProject")).proj_no
        : JSON.parse(localStorage.getItem("project")).projectInfo.proj_no,
      dioRow.value.equip_no,
      file_type.value
    );

    file_type.value = null;
    ElMessage({
      message: "上传成功",
      type: "success",
    });
    getFileTable(dioRow.value, attach_file_type_.value);
  };

  let delFile = async (index, row) => {
    await DeleteEquipAttachFile({ Id: row.Id });
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getFileTable(dioRow.value, attach_file_type_.value);
  };

  const position = ref({
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  });

  let viewFile = (index, row) => {
    checkFile("", row);
  };

  let downLoadFile = async (index, row) => {
    let res = await DownloadDepartmentFile({ remote_url: row.remote_url });

    let filename = res.headers; //下载后文件名
    let filename2 = ""; //下载后文件名
    filename = filename["content-disposition"];
    filename = window.decodeURI(filename);
    filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
    filename = filename.split(";")[1].split("filename=")[1];
    const link = document.createElement("a"); // 创建a标签
    const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
    link.style.display = "none";
    const url = window.URL.createObjectURL(blo);
    link.href = url;
    if (filename == undefined) {
      filename = filename2;
    }
    link.download = filename;

    // link.setAttribute('download', "fileName")
    document.body.appendChild(link);
    link.click(); // 触发下载
    window.URL.revokeObjectURL(url); // 释放掉blob对象
    document.body.removeChild(link);
  };

  const mousemoveHandler = (e) => {
    position.value = DOMRect.fromRect({
      width: 0,
      height: 0,
      x: e.clientX - 10,
      y: e.clientY - 1,
    });
  };

  let tooltipsData = ref({});
  let cellMouseEnter = (e, a2, a4, a5) => {
    setTimeout(() => {
      if (a2.label == "设备位号") {
        tooltipsData.value = e;
        activeNumber.value = Number(e.equip_check) / 10;
        activeNumberModel.value = Number(e.model_stage) / 10;
        visible.value = true;
        mousemoveHandler(a5);
      }
    }, 1500);
  };

  let cellMouseLeave = (e, $event) => {
    // visible.value = false;
  };

  let emit = defineEmits(["tableList", "tableDataSend", "SelectMajorFn"]);

  let handleCopyEquip = async (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
      if (valid) {
        // 获取目标项目代号
        const destProjNo = allProjList.value.find(
          (x) => x.proj_oid === destEquipInfo.value.destProjOid
        ).proj_no;

        let filterData = OptionsEquip.value.find((v) => {
          return v.equip_oid == destEquipInfo.value.destEquipNo;
        });

        if (reuseOBJ.value.equip_class !== filterData.equip_class) {
          ElMessage.error("设备类型不一致，请重新选择设备");
        } else {
          ElMessageBox.confirm(
            `此操作将项目${destProjNo}中的设备复用到${reuseOBJ.value.equip_no}中，是否继续`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(async () => {
            let res = await ReuseEquip({
              oriEquip_oid: destEquipInfo.value.destEquipNo,
              destProj_oid: destEquipInfo.value.destProjOid,
              destEquip_oid: reuseOBJ.value.equip_oid,
              equip_designer: JSON.parse(localStorage.getItem("userMessage"))
                .user_name,
            });

            if (res == "True") {
              ElMessage({
                message: "复用成功",
                type: "success",
              });
              store.UpgradeEquipCount += 1;
            } else {
              ElMessage({
                message: res.data,
                type: "error",
              });
            }
            copyEquipFormVisible.value = false;
          });
        }
      }
    });
  };

  let destEquipInfoRef = ref("");

  let revChange = (text, item) => {
    let data = item.different.filter((v) => v.equip_version === text)[0];
    item.equip_oid = data.equip_oid;
    item.equip_checker = data.equip_checker;
    item.equip_lastmodifytime = data.equip_lastmodifytime;
    item.equip_version = data.equip_version;
    item.design_finish_time = data.design_finish_time;
    item.return_condition_time = data.return_condition_time;
    item.equip_check = data.equip_check;
  };

  let closeFrom = () => {
    destEquipInfoRef.value.resetFields();
  };

  let dioFiles = ref([]);
  let dioRow = ref({});
  let showDioFile = async (row) => {
    dioRow.value = row;
    dialogFiles.value = true;
    getFileTable(row, attach_file_type_.value);
  };
  let attach_file_type_ = ref([]);

  watch(attach_file_type_, () => {
    getFileTable(dioRow.value, attach_file_type_.value);
  });

  let getFileTable = async (row, attach_file_type = []) => {
    let res = await GetEquipAttachFiles({
      proj_no: localStorage.getItem("selectedProject")
        ? JSON.parse(localStorage.getItem("selectedProject")).proj_no
        : JSON.parse(localStorage.getItem("project")).projectInfo.proj_no,
      equip_no: row.equip_no,
    });

    const filters = {
      attach_file_type,
    };
    dioFiles.value = multiFilter(JSON.parse(JSON.stringify(res)), filters);
  };

  function multiFilter(array, filters) {
    const filterKeys = Object.keys(filters);

    return array.filter((item) => {
      return filterKeys.every((key) => {
        if (!filters[key].length) return true;
        return !!~filters[key].indexOf(item[key]);
      });
    });
  }

  let destEquipInfoRules = ref({
    destProjOid: [
      { required: true, message: "请选择目标项目代号", trigger: "blur" },
    ],
    destEquipNo: [{ required: true, message: "请输入设备代号", trigger: "blur" }],
    destEquipName: [
      { required: true, message: "请输入设备名称", trigger: "blur" },
    ],
  });

  let allProjList = ref([]);
  let destEquipInfo = ref({
    destProjOid: "",
    destEquipNo: "",
    destEquipName: "",
  });

  let OptionsEquip = ref([]);
  watch(
    () => destEquipInfo.value.destProjOid,
    async () => {
      destEquipInfo.value.destEquipNo = "";
      let tableData = await getEquipments({
        proj_oid: destEquipInfo.value.destProjOid,
        equip_user: JSON.parse(localStorage.getItem("userMessage")).user_name,
        authCode: localStorage.getItem("authCode"),
      });

      tableData.sort(customSort);
      let data = JSON.parse(JSON.stringify(tableData)).map((v) => {
        return {
          ...v,
          different: [
            {
              equip_oid: v.equip_oid,
              equip_version: v.equip_version,
              value: v.equip_version,
              label: v.equip_version,
              design_finish_time: v.design_finish_time,
              return_condition_time: v.return_condition_time,
              equip_check: v.equip_check,
              equip_checker: v.equip_checker,
              equip_lastmodifytime: v.equip_lastmodifytime,
            },
          ],
        };
      });
      let map = new Map();
      data.forEach((v) => {
        if (map.has(`${v.equip_no} - ${v.drawing_stage}`)) {
          let obj = map.get(`${v.equip_no} - ${v.drawing_stage}`);
          if (obj.drawing_stage == v.drawing_stage) {
            obj.different.push({
              equip_oid: v.equip_oid,
              equip_checker: v.equip_checker,
              equip_lastmodifytime: v.equip_lastmodifytime,
              equip_version: v.equip_version,
              value: v.equip_version,
              label: v.equip_version,
              design_finish_time: v.design_finish_time,
              return_condition_time: v.return_condition_time,
              equip_check: v.equip_check,
            });
            map.set(`${v.equip_no} - ${v.drawing_stage}`, obj);
          } else {
            map.set(`${v.equip_no} - ${v.drawing_stage}`, v);
          }
        } else {
          map.set(`${v.equip_no} - ${v.drawing_stage}`, v);
        }
      });

      let datas = [...map].map((v) => v[1]);

      OptionsEquip.value = datas.map((v) => {
        return {
          label: `${v.equip_name || "暂无设备名称"} - ${v.equip_no} - (${v.drawing_stage
            })`,

          value: v.equip_oid,
          ...v,
        };
      });
    }
  );

  let reuseOBJ = ref({});
  let copyEquipFormVisible = ref(false);

  let reuseEquip = async (row) => {
    reuseOBJ.value = row;

    copyEquipFormVisible.value = true;
    let res = await getproject({ user_token: localStorage.getItem("token") });
    allProjList.value = res;
  };

  let handleSelectionChange = (data) => {
    emit("tableList", data);
  };

  let upgradeEquip = async (row) => {
    setTimeout(async () => {
      try {
        await UpgradeEquip({
          equip_oid: row.equip_oid,
        });
        ElMessage({
          type: "success",
          message: "升版成功",
        });
        store.UpgradeEquipCount += 1;
      } catch (error) {
        console.log(error);
        ElMessage({
          type: "error",
          message: "升版失败",
        });
      }
    }, 200);
  };

  let changeStr = (str) => {
    if (str) {
      if (str.includes("T")) {
        return str.replace("T", " ");
      } else {
        return str;
      }
    } else {
      return "";
    }
  };

  let setEquipStatus = (status) => {
    if (status === "0") {
      equipActive.value = "设计中";
      return "info";
    } else if (status === "10") {
      equipActive.value = "审核中";
      return "primary";
    } else if (status === "20") {
      equipActive.value = "校核中";
      return "warning";
    } else if (status === "30") {
      equipActive.value = "已完成";
      return "success";
    } else {
      return "info";
    }
  };

  let setEquipStatusModel = (status) => {
    if (status === "0") {
      equipActive.value = "设计中";
      return "info";
    } else if (status === "10") {
      equipActive.value = "审核中";
      return "primary";
    } else if (status === "20") {
      equipActive.value = "已完成";
      return "success";
    } else {
      return "info";
    }
  };

  let tableDatas = ref([]);
  let table_Loading = ref(true);
  let copyDataWait = ref([]);
  let changeData = (tableData) => {
    let data = JSON.parse(JSON.stringify(tableData)).map((v) => {
      return {
        ...v,
        different: [
          {
            equip_oid: v.equip_oid,
            equip_version: v.equip_version,
            value: v.equip_version,
            label: v.equip_version,
            design_finish_time: v.design_finish_time,
            return_condition_time: v.return_condition_time,
            equip_check: v.equip_check,
            equip_checker: v.equip_checker,
            equip_lastmodifytime: v.equip_lastmodifytime,
          },
        ],
      };
    });
    let map = new Map();
    data.forEach((v) => {
      if (map.has(`${v.equip_no} - ${v.drawing_stage}`)) {
        let obj = map.get(`${v.equip_no} - ${v.drawing_stage}`);
        if (obj.drawing_stage == v.drawing_stage) {
          obj.different.push({
            equip_oid: v.equip_oid,
            equip_checker: v.equip_checker,
            equip_lastmodifytime: v.equip_lastmodifytime,
            equip_version: v.equip_version,
            value: v.equip_version,
            label: v.equip_version,
            design_finish_time: v.design_finish_time,
            return_condition_time: v.return_condition_time,
            equip_check: v.equip_check,
          });
          map.set(`${v.equip_no} - ${v.drawing_stage}`, obj);
        } else {
          map.set(`${v.equip_no} - ${v.drawing_stage}`, v);
        }
      } else {
        map.set(`${v.equip_no} - ${v.drawing_stage}`, v);
      }
    });
    let obj = [...map].map((v) => v[1]);
    obj.sort((a, b) => {
      if (a.equip_unit_no && b.equip_unit_no) {
        if (a.equip_unit_no < b.equip_unit_no) return -1;
        if (a.equip_unit_no > b.equip_unit_no) return 1;
      } else if (a.equip_unit_no) {
        return -1;
      } else if (b.equip_unit_no) {
        return 1;
      }

      if (a.equip_no < b.equip_no) return -1;
      if (a.equip_no > b.equip_no) return 1;

      const drawingStageOrder = { 工程图: 1, 施工图: 2 };
      if (a.drawing_stage && b.drawing_stage) {
        if (
          drawingStageOrder[a.drawing_stage] < drawingStageOrder[b.drawing_stage]
        )
          return -1;
        if (
          drawingStageOrder[a.drawing_stage] > drawingStageOrder[b.drawing_stage]
        )
          return 1;
      }

      return 0;
    });
    copyDataWait.value = JSON.parse(JSON.stringify(obj));
    tableDatas.value = copyDataWait.value.slice(0, 20);
    table_Loading.value = false;
    emit("tableDataSend", obj);
  };

  // 自定义排序函数
  let customSort = (a, b) => {
    // 判断 a 和 b 是否含有字母 R
    var aHasR = a.equip_version.includes("R");
    var bHasR = b.equip_version.includes("R");

    // 如果 a 和 b 都含有字母 R
    if (aHasR && bHasR) {
      // 提取 R 后的数字并转换为整数进行比较
      var aNum = parseInt(a.equip_version.substr(1));
      var bNum = parseInt(b.equip_version.substr(1));
      return bNum - aNum;
    }
    // 如果 a 和 b 都不含有字母 R
    else if (!aHasR && !bHasR) {
      // 直接比较字符串大小
      var aNum2 = parseInt(a.equip_version, 10);
      var bNum2 = parseInt(b.equip_version, 10);

      return bNum2 - aNum2;
    }
    // 如果一个含有字母 R，一个不含有
    else {
      // 含有字母 R 的排在前面
      return aHasR ? -1 : 1;
    }
  };

  let activeNumberModel = ref(0);
  let changeStatueModel = async (num, e) => {
    let str = num === 10 ? "校核" : num === 20 ? "已完成" : "";
    let bool = await ElMessageBox.confirm(
      `您确定要把当前状态修改为${str}吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );
    if (bool) {
      let res = await ModifyEquipModelStatusV2({
        proj_oid: tooltipsData.value.proj_oid,
        equip_no: tooltipsData.value.equip_no,
        drawing_stage: tooltipsData.value.drawing_stage,
        model_stage: num,
        equip_user: JSON.parse(localStorage.getItem("userMessage")).user_name,
      });

      if (res !== "True") {
        ElMessage({
          message: res.data,
          type: "error",
        });
      } else {
        activeNumberModel.value = num / 10;
        store.UpgradeEquipCount += 1;
        ElMessage({
          message: "设计状态修改成功",
          type: "success",
        });
        // await UpdateLastModifyTime({ equip_oid: equip_oid.value });
      }
    }
  };

  let changeStatue = async (num) => {
    let str = num === 10 ? "校核" : num === 20 ? "审核" : "已完成";
    let bool = await ElMessageBox.confirm(
      `您确定要把当前状态修改为${str}吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );
    if (bool) {
      let res = await ModifyEquipStatus({
        proj_oid: tooltipsData.value.proj_oid,
        equip_no: tooltipsData.value.equip_no,
        drawing_stage: tooltipsData.value.drawing_stage,
        equip_check: num,
        equip_user: JSON.parse(localStorage.getItem("userMessage")).user_name,
      });

      if (res !== "True") {
        ElMessage({
          message: res.data,
          type: "error",
        });
      } else {
        activeNumber.value = num / 10;
        store.UpgradeEquipCount += 1;
        ElMessage({
          message: "设备状态修改成功",
          type: "success",
        });
        await UpdateLastModifyTime({ equip_oid: tooltipsData.value.equip_oid });
      }
    }
  };

  let changeInput = async (e, data) => {
    try {
      await UpdateEquipCustomAttVal({
        proj_oid: data.proj_oid,
        equip_no: data.equip_no,
        drawing_stage: data.drawing_stage,
        custom_att1: tableHeaderStrProps.value,
        custom_att1_val: data.custom_att1_val,
        user: JSON.parse(localStorage.getItem("userMessage")).user_account,
      });
    } catch (e) {
      ElMessage({
        message: "修改失败，请检查输入参数",
        type: "error",
      });
    }

    // store.UpgradeEquipCount += 1;
  };

  let changeHeader = async () => {
    if (
      props.tableHeaderStr &&
      props.tableHeaderStr !== tableHeaderStrProps.value
    ) {
      ElMessageBox.confirm(`您确定要修改表头吗？对应的表格内容会改变`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await UpdateEquipCustomAttribute({
            proj_oid: props.Myproj_oid,
            attributeDisplayName: tableHeaderStrProps.value,
            user: JSON.parse(localStorage.getItem("userMessage")).user_account,
          });
          store.UpgradeEquipCount += 1;
          ElMessage({
            message: "表头修改成功",
            type: "success",
          });
        })
        .catch(() => {
          tableHeaderStrProps.value = props.tableHeaderStr;
        });
    } else {
      await UpdateEquipCustomAttribute({
        proj_oid: props.Myproj_oid,
        attributeDisplayName: tableHeaderStrProps.value,
        user: JSON.parse(localStorage.getItem("userMessage")).user_account,
      });
      store.UpgradeEquipCount += 1;
      ElMessage({
        message: "表头修改成功",
        type: "success",
      });
    }
  };

  let heightActive = ref(0);
  let equip_designer_class = ref([]);
  watch(
    props,
    () => {
      if (props.equipments) {
        new Promise((resolve) => {
          maxNum.value = JSON.parse(
            localStorage.getItem("userMessage")
          ).maxPermission;

          tableHeaderStrProps.value = props.tableHeaderStr;
          props.equipments.sort(customSort);
          resolve();
        }).then(() => {
          heightActive.value =
            document.querySelector(".equip-list").clientHeight - 60;
          changeData(props.equipments);
          equip_designer_classPINGYING.value = props.equip_designer_class;
          equip_checker_classPINGYING.value = props.equip_checker_class;
          auditor_classPINGYING.value = props.auditor_class;
          approver_classPINGYING.value = props.approver_class;
          custom_att1_val_classPINGYING.value = props.custom_att1_val_option;
          my_tables.value.setScrollTop(0);

          nextTick(() => {
            height.value = document
              .querySelector(".mmy-table .el-table__row")
              ?.getClientRects()[0].height;
          });
          if (
            sessionStorage.getItem("autoRouter") &&
            JSON.parse(sessionStorage.getItem("autoRouter"))
          ) {
            setTimeout(() => {
              let row = JSON.parse(sessionStorage.getItem("updateEquipCenter"));
              let newData = tableDatas.value.filter(
                (v) =>
                  v.equip_name === row.equip_name &&
                  v.drawing_stage === row.drawing_stage
              );
              console.log(newData);
              if (newData.length > 0) {
                editEquipment(newData[0]);
              }
            }, 300);
          }
        });
      }
    },
    { immediate: true }
  );

  // 定义设备列表表头
  const tableHeader = [
    {
      prop: "equip_unit_no",
      label: "主项",
      fixed: true,
      width: "110",
      sortable: true,
    },
    {
      prop: "equip_no",
      label: "设备位号",
      fixed: true,
      width: "150",
      sortable: true,
    },
    {
      prop: "equip_name",
      label: "设备名称",
      fixed: true,
      width: "150",
      sortable: true,
    },

    {
      prop: "equip_class",
      label: "设备种类",
      fixed: true,
      width: "180",
      sortable: false,
    },
    {
      prop: "installation_mode",
      label: "安装方式",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "equip_dwg_no",
      label: "设备图号",
      fixed: false,
      width: "110",
      sortable: true,
    },
    {
      prop: "vessel_type",
      label: "设备类别",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "equip_count",
      label: "台数",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "equip_dry_weight",
      label: "空设备质量",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "special_material_weight",
      label: "特材重量",
      width: "220",
      fixed: false,
      sortable: false,
    },
    {
      prop: "equip_designer",
      label: "设计人",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "equip_checker",
      label: "校核人",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "auditor",
      label: "审核人",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "approver",
      label: "审定人",
      fixed: false,
      width: "100",
      sortable: false,
    },
    {
      prop: "conditional_send_time",
      label: "条件发送时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "design_finish_time",
      label: "设计完成时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "check_finish_time",
      label: "校核完成时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "review_finish_time",
      label: "审核完成时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "return_condition_time",
      label: "返条件时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
    {
      prop: "storage_time",
      label: "入库时间",
      fixed: false,
      width: "150",
      sortable: false,
    },
  ];

  const router = useRouter();
  // 编辑设备
  const editEquipment = (row) => {
    sessionStorage.setItem("updateEquipCenter", JSON.stringify(row));
    sessionStorage.setItem("autoRouter", false);
    sessionStorage.setItem(row.equip_oid, JSON.stringify(row));
    sessionStorage.setItem("authButton", true);
    row.hasNewProcess == "True"
      ? sessionStorage.setItem("hasNewProcess", true)
      : sessionStorage.setItem("hasNewProcess", false);

    router.push({
      name: "editEquipment",
      query: {
        equip_oid: row.equip_oid,
      },
    });
  };

  let checkEquipment = (row) => {
    sessionStorage.setItem("updateEquipCenter", JSON.stringify(row));
    sessionStorage.setItem("autoRouter", false);
    sessionStorage.setItem(row.equip_oid, JSON.stringify(row));
    sessionStorage.setItem("authButton", false);
    row.hasNewProcess == "True"
      ? sessionStorage.setItem("hasNewProcess", true)
      : sessionStorage.setItem("hasNewProcess", false);

    router.push({
      name: "editEquipment",
      query: {
        equip_oid: row.equip_oid,
      },
    });
  };

  let drawing_stage = ref([]);
  let SelectMajor = ref([]);

  let equip_nameInput = ref([]);

  let equipEquip_no = ref([]);

  let equipEquip_class = ref([]);
  let changeFn = (text, title) => {
    emit("SelectMajorFn", { text, title });
  };

  let clickequip_no = ref("");
  let rowClick = (row) => {
    clickequip_no.value = row.equip_no;
  };
  let transcriptTableRowClassName = ({ row, rowIndex }) => {
    if (row.equip_no == clickequip_no.value) {
      // return "active_row";
    }
    return "";
  };

  let AddClass = (row) => {
    if (row.columnIndex == 4) {
      return "sbwh";
    }
  };
</script>

<style scoped lang="scss">
  ::v-deep(.active_row) {
    .el-table__cell {
      background-color: #f5f7fa;
    }
  }

  .create-del-equip {
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep(.mmy-table) {
    .el-table--large {
      .el-table__cell {
        padding: 6px 0;
      }
    }
  }

  .padding_content {
    padding: 10px;
    font-size: 12px;
    width: 300px;
    align-items: center;
    display: flex;
  }

  .active {
    color: rgb(24, 144, 255);
  }

  .icone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
